<template>
  <div class="container">
    <div>新增优惠券</div>
    <span>基本信息</span>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <!-- 优惠券类型 -->
      <el-form-item label="优惠券类型" prop="type">
        <el-input v-model="ruleForm.type" />
      </el-form-item>

      <!-- 优惠券名称 -->
      <el-form-item label="优惠券名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>

      <!-- 领取时间 -->
      <el-form-item label="领取时间" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker
              v-model="ruleForm.date1"
              type="date"
              label="Pick a date"
              placeholder="起始时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col class="text-center" :span="2">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-date-picker
              v-model="ruleForm.date2"
              type="date"
              label="Pick a date"
              placeholder="结束时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>

      <!-- 发放商家 -->
      <el-form-item label="发放商家" prop="store">
        <el-input v-model="ruleForm.store" />
      </el-form-item>

      <!-- 优惠券面值 -->
      <el-form-item label="优惠券面值" prop="cost">
        <el-input v-model="ruleForm.cost" />
      </el-form-item>

      <!-- 发放数量 -->
      <el-form-item label="发放数量" prop="num">
        <el-input v-model="ruleForm.num" />
      </el-form-item>

      <!-- 使用门槛 -->
      <el-form-item label="使用门槛" prop="condition">
        <el-radio-group v-model="ruleForm.condition">
          <el-radio label="有门槛" />
          <el-radio label="无门槛" />
        </el-radio-group>
      </el-form-item>

      <!-- 有效期 -->
      <el-form-item label="有效期" prop="term">
        <el-radio-group v-model="ruleForm.term" class="youxiaoqi">
          <!-- 第一个选项 -->
          <el-radio label="制定有效期" />
          <!-- 时间选择 -->
          <div class="timeChoose">
            <el-col :span="11">
              <el-form-item prop="date3">
                <el-date-picker
                  v-model="ruleForm.date3"
                  type="date"
                  label="Pick a date"
                  placeholder="开始时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col class="text-center" :span="2">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="date4">
                <el-date-picker
                  v-model="ruleForm.date4"
                  type="date"
                  label="Pick a date"
                  placeholder="结束时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </div>

          <!-- 第二个选择 -->
          <div class="timeChoose2">
            <el-radio label="领券当天起" />

            <!-- 时间自定义 -->
            <el-form-item prop="date5">
              <el-input v-model="ruleForm.date5" />
            </el-form-item>
            <el-col class="text-center" :span="6">
              <span class="text-gray-500">天内有效</span>
            </el-col>
          </div>
        </el-radio-group>
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item class="formbtn">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button
          type="primary"
          color="#ffa79c"
          @click="submitForm(ruleFormRef)"
          >创建</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

import type { FormInstance, FormRules } from "element-plus";

export default defineComponent({
  setup() {
    const store = useStore();
    const router = useRouter();
    const formSize = ref("default");
    const ruleFormRef = ref<FormInstance>();
    const ruleForm = reactive({
      type: "",
      name: "",
      count: "",
      date1: "",
      date2: "",
      store: "",
      cost: "",
      num: "",
      condition: "有门槛",
      term: "",
      date3: "",
      date4: "",
      date5: "",
    });

    const rules = reactive<FormRules>({
      type: [
        {
          required: true,
          message: "请输入优惠券类型名",
          trigger: "blur",
        },
        { min: 1, max: 10, message: "类型名为1到10个字符", trigger: "blur" },
      ],
      name: [
        {
          required: true,
          message: "请输入优惠券名称",
          trigger: "blur",
        },
        { min: 1, max: 10, message: "名称为1到10个字符", trigger: "blur" },
      ],
      count: [
        {
          required: true,
          message: "Please select Activity count",
          trigger: "blur",
        },
      ],
      date1: [
        {
          type: "date",
          required: true,
          message: "请选择领取开始时间",
          trigger: "blur",
        },
      ],
      date2: [
        {
          type: "date",
          required: true,
          message: "请选择领取结束时间",
          trigger: "blur",
        },
      ],
      store: [
        {
          required: true,
          message: "输入平台名",
          trigger: "blur",
        },
      ],
      num: [
        {
          required: true,
          message: "输入发放数量",
          trigger: "blur",
        },
      ],
      cost: [
        {
          required: true,
          message: "输入优惠券面值",
          trigger: "blur",
        },
      ],
      condition: [
        {
          required: true,
        },
      ],
      term: [
        {
          required: true,
          message: "请选择有效期开始时间",
        },
      ],
      date3: [
        {
          type: "date",
          message: "请选择有效期开始时间",
          trigger: "blur",
        },
      ],
      date4: [
        {
          type: "date",
          message: "请选择有效期结束时间",
          trigger: "blur",
        },
      ],
      date5: [
        {
          type: "date",
          message: "请选择有效期结束时间",
          trigger: "blur",
        },
      ],
    });

    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log("submit!");
          router.push("/home/coupon");
          store.commit("coupon/addCoupon", ruleForm);
        } else {
          console.log("error submit!", fields);
        }
      });
    };
    //新增按钮

    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
    };

    const options = Array.from({ length: 10000 }).map((_, idx) => ({
      value: `${idx + 1}`,
      label: `${idx + 1}`,
    }));

    return {
      formSize,
      ruleFormRef,
      ruleForm,
      rules,
      submitForm,
      resetForm,
      options,
    };
  },
});
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  padding: 16px 0;
  font-size: 18px;
  font-family: Microsoft YaHei;
  color: #333333;
  & > div {
    background: #ffdb92;
    width: 160px;
    height: 50px;
    border-radius: 0 25px 25px 0;
    margin-top: 16px;
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.5);
    padding-left: 20px;
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
  }
  & > span {
    display: block;
    padding: 32px 0 0 58px;
    font-weight: 400;
  }

  .demo-ruleForm {
    margin: 0 auto;
    width: 500px;
  }
  .formbtn {
    /deep/.el-form-item__content {
      margin: 20px 0 !important;
      justify-content: center;
    }
  }
}
.youxiaoqi {
  flex-direction: column;
  align-items: flex-start;
  .timeChoose {
    display: flex;
  }
  .timeChoose2 {
    display: flex;
    margin-top: 25px;
    flex: 0;
    justify-content: flex-start;
    .el-radio {
      margin-right: 10px;
    }
    .el-form-item {
      width: 100px;
    }
    .text-gray-500 {
      margin-left: 10px;
    }
  }
}
.el-form-item__content {
  button:nth-last-of-type(1) {
    color: #fff;
  }
}
.text-center {
  text-align: center;
  .text-gray-500 {
    color: #333333;
    font-size: 14px;
  }
}
</style>
